<template>
	<view :style="{'--color':color}" class="p-bot200">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :bgMake="5" :Color="2" :fromShare="fromShare" title="活动详情"></navBar>
		<!-- #endif -->
		<block v-if="pageData">
			<image :src="$imgUrls(pageData.imgs[0])" mode="widthFix" class="rows"></image>
			<view class="viewbox auto p-top20  bot">
				<text class="line45 black size32 bold" selectable>{{pageData.name}}</text>
				<view class="d-flex a-center p-top20 p-bot10 ">
					<view class="iconfont icon-shijian color size36 m-right16"></view>
					<text class="color_33 size28 m-right10">活动时间：</text>
					<text class="color_33 size28" selectable>{{pageData.start_time}}</text>
				</view>
				<view class="d-flex p-top10 p-bot20" @click="$openLocation(pageData)">
					<view class="iconfont icon-dingwei color size36 m-right16"></view>
					<text class="color_33 size28 m-right10">活动地址：</text>
					<text class="flex-1 color_33 size28" selectable>{{pageData.address}}</text>
					<view class="iconfont icon-daohang color_008 size36 p-left10" v-if="pageData.latitude"></view>
				</view>
			</view>


			<view class="viewbox auto m-top30 p-bot30 bot">
				<view class="row a-center j-sb">
					<text class="black size30 bold">报名嘉宾</text>
					<view class="d-flex a-center">
						<view class="iconfont icon-huo color size28"></view>
						<text class="color_99 size26">{{pageData.members.length}}人已报名</text>
					</view>
				</view>
				<view class="row  m-top20" v-if="pageData.members.length">
					<block v-for="(item,index) in pageData.members" :key="index">
						<view class="HeadImgs flexac" :class="{'mismatch':index != 0,'endImgs':index == 12}"
							v-if="index <= 12">
							<image :src="$imgUrls(item.v_headimg)" mode="aspectFill" @error="handleImageError(index)"
								class="Head_img"></image>
						</view>
					</block>
				</view>
			</view>


			<view class="viewbox auto m-top20">
				<u-parse :content="pageData.detail" :domain="imgUrl"></u-parse>
			</view>

			<view class="footer top">
				<view class="contunum d-flex a-center">
					<view class="d-flex a-center">
						<view class="d-flex f-column a-center fot_IconBox ">
							<image :src="$staticImg('share1.png')" class="fot_Icon"></image>
							<text class="color_33 h6">分享</text>
							<!-- #ifdef MP-WEIXIN -->
							<button class="fixBtn" open-type="share"></button>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<button class="fixBtn" @click="$Toast('右上角点击分享')"></button>
							<!-- #endif -->
						</view>

						<view class="d-flex f-column a-center fot_IconBox">
							<image :src="$staticImg('consult1.png')" class="fot_Icon"></image>
							<text class="color_33 h6">咨询</text>
							<!-- #ifdef MP-WEIXIN -->
							<button class="fixBtn" open-type="contact"></button>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<button class="fixBtn" @click="call()"></button>
							<!-- #endif -->
						</view>

					</view>

					<view class="signUp flexac" @click="doSign" :class="pageData.state==-1?'may':'Maynot'">
						<view class="iconfont icon-baoming white size48"></view>
						<text class="white size30 m-left10">{{signUpTxt}}</text>
						<text class="white size30 m-left10" v-if="pageData.pay_fee > 0">￥{{pageData.pay_fee}}</text>
					</view>

				</view>
			</view>

		</block>
		<Load v-else></Load>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				fromShare: 0,
				imgUrl: this.imgUrl,

				Events: 1,
				event_id: '',
				pageData: '',
			}
		},
		onLoad(opt) {
			if (opt.event_id) this.event_id = opt.event_id;
			if (opt.fromShare) this.fromShare = opt.fromShare;
		},
		onShow() {
			this.getEventDetail();
		},
		methods: {
			getEventDetail() {
				this.$http.get({
					url: '/singleSaleEventApi/getEventDetail',
					data: {
						event_id: this.event_id
					}
				}).then(res => {
					if (res.code != '200') return this.$Toast(res.msg);
					this.pageData = res.data;
					// #ifdef H5
					let param = `pageType=3&artId=${this.event_id}&share_v_id=${this.vid}`;
					let share_obj = {
						title: this.pageData.name,
						desc: this.pageData.address,
						imgUrl: this.pageData.imgs[0],
					}
					this.$H5Share(param, share_obj);
					// #endif
				})
			},
			doSign() {
				if (!this.vid) return this.toUrl(`/User/login`);
				if (this.pageData.state != -1) return;
				this.$Modal('提示', '确定报名吗？').then(res => {
					if (!res) return;
					this.pageData.pay_fee > 0 ? this.playSignUp() : this.SignUp();
				})

			},

			playSignUp() {
				let that = this;
				that.$http.get({
					url: '/accountPay/getEventPayInfo',
					data: {
						event_id: that.event_id
					}
				}).then(res => {
					if (res.code != '100') return;
					const result = res.data;
					// #ifdef MP-WEIXIN
					that.$pop.getPayment(result).then(pay => {
						if (pay) that.getEventDetail();
					})
					// #endif
					// #ifdef H5
					window.location.href = that.palyUrl + result;
					// #endif
				})
			},


			SignUp() {
				this.$http.post({
					url: '/singleSaleEventApi/doSign',
					data: {
						event_id: this.event_id
					}
				}).then(res => {
					if (res.code != '200') return this.$Toast(res.msg);
					this.$Toast(res.data);
					this.getEventDetail();
				})
			},
			handleImageError(index) {
				const Default = this.$pop.RandomAvatar();
				this.pageData.members[index].v_headimg = Default;
			}
		},
		onShareAppMessage(res) {
			let share = this.pageData;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: share.name,
				desc: share.address,
				path: `/pages/startUp/startUp?share_v_id=${this.vid}&pageType=3&artId=${this.event_id}`,
				imageUrl: this.$imgUrls(share.imgs[0])
			}
		},
		computed: {
			...mapState(['color', 'vid', 'service_tel']),
			signUpTxt() {
				let Txt = '';
				switch (this.pageData.state ? this.pageData.state : '') {
					case -1:
						Txt = '我要报名'
						break;
					case '0':
						Txt = '待审核'
						break;
					case '1':
						Txt = '审核通过'
						break;
					case '2':
						Txt = '审核失败'
						break;
					case '3':
						Txt = '活动已结束'
						break;
					case '4':
						Txt = '活动已取消'
						break;
					case '5':
						Txt = '活动已满员'
						break;
					case '6':
						Txt = '已报名'
						break;
					case '':
						Txt = '暂无法报名'
						break;
					default:
						break;
				}
				return Txt;
				// return this.pageData.state == 1?'我要报名':'活动已结束'
			}
		},

	}
</script>

<style lang="scss" scoped>
	.Dots {
		width: 38rpx;
		height: 38rpx;
		position: relative;
		border-radius: 50%;
		background-image: linear-gradient(to top, #ffffff 0%, #ed7083 100%);
	}

	.HeadImgs {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		position: relative;
		background-color: #ffffff;
		overflow: hidden;
	}

	.Head_img {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		position: relative;
	}

	.Head_img::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.25);
		/* 透明度设置蒙层的亮度 */
		z-index: 1;
		backdrop-filter: blur(3rpx);
	}

	.mismatch {
		margin-left: -40rpx;
		position: relative;
	}

	.endImgs {
		position: relative;

	}

	.endImgs::before {
		content: '';
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.1);
		position: absolute;
		left: 0;
		top: 0;
	}

	.endImgs::after {
		content: '...';
		color: #ffffff;
		font-size: 60rpx;
		position: absolute;
		left: 50%;
		top: -10rpx;
		transform: translate(-50%, 0);
	}

	.footer {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		z-index: 10;
	}

	.contunum {
		width: 100%;
		height: 110rpx;
	}

	.fot_IconBox {
		padding: 0 30rpx;
		position: relative;
	}

	.fixBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-color: transparent;
		border: none;
	}

	.fixBtn::after {
		border: none;
	}

	.fot_Icon {
		width: 50rpx;
		height: 50rpx;
	}

	.signUp {
		flex: 1;
		height: 80rpx;
		margin-right: 30rpx;
		margin-left: 10rpx;
		border-radius: 40rpx;

	}

	.may {
		background-color: var(--color);
	}

	.Maynot {
		background-color: #c1c1c1;
	}
</style>